<template>
    <view class="content">
        <myhead :status="false"></myhead>
        <view v-if="loading">
            <m-for-skeleton
                :avatarSize="200"
                :row="5"
                :loading="loading"
                :isarc="key%2==0?'circular':'square'"
                v-for="(item,key) in 4"
                :key="key">
               <!-- <view>加载</view> -->
            </m-for-skeleton>
        </view>
        <scroll-view scroll-y="true" v-if="!loading">
			
			<view class="uni-form-item uni-column" @tap="toSearch">
							<input class="uni-input" confirm-type="search" placeholder="搜索" />
						</view>
			
            <view class="index-list">
                <view class="index-list-item" v-for="(item, index) in playlist" :key="index">
                    <view class="index-list-img">
                        <image class="index-list-img-image" :src="item.coverImgUrl" mode="" @click="toList(item.id)"></image>
                        <text>{{ item.updateFrequency }}</text>
                    </view>
                    <view class="index-list-text">
                        <view v-for="(track, trackIndex) in item.tracks" :key="track.first">
                            <text>{{ trackIndex+1 }}. {{ limitLength(track.first, 10) }} - {{ track.second }}</text>
                        </view>
                    </view>
                </view>
            </view>
        </scroll-view>
    </view>
</template>

<script>
import { topList } from "../../common/api.js";
export default {
    data() {
        return {
            loading: true,
            playlist: [],
        }
    },
    onLoad() {
        topList().then(res => {
            this.playlist = res.list.slice(0, 4);
            this.loading = false; // 数据加载完成后隐藏骨架屏
        })
    },
    methods: {
        toSearch() {
            uni.navigateTo({
                url: "/pages/search/search"
            })
        },
        limitLength(str, maxLength) {
            if (str.length > maxLength) {
                return str.slice(0, maxLength) + '...';
            } else {
                return str;
            }
        },
        toList(id) {
            uni.navigateTo({
                url: "/pages/list/list?id=" + id
            });
        }
    }
}
</script>

<style>
	.index-list-img-image {
		width: 100%;
		height: 100%;
	}

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}

	.index-list {
		margin: 30rpx;
		width: 90%;
	}

	.index-list-item {
		display: flex;
		margin-bottom: 35rpx;
	}

	.index-list-img {
		width: 212rpx;
		height: 212rpx;
		margin-right: 20rpx;
		border-radius: 15rpx;
		overflow: hidden;
	}

	.index-list-img text {
		position: sticky;
		font-size: 22rpx;
		color: white;
		bottom: 15rpx;
		left: 15rpx;
	}

	.index-list-text {
		flex: 1;
		font-size: 24rpx;
		line-height: 68rpx;
	}

	.index-list-text view {}
	/* 
	.uni-input{
		margin-top: 30rpx; */
		/* margin-left: 10rpx; */
		/* height: 75rpx;
		width: 375rpx; */
		/* background-color: aliceblue; */
		/* border: 2px solid black; */
	/* 	border-radius: 20px;
		background-image: "../../statis/serch";
	} */
	
	.uni-input {
			margin-left: 50rpx;
		    margin-top: 30rpx;
		    height: 105rpx;
		    width: 650rpx;
		    background-color: aliceblue;
		    border-radius: 20px;
		    padding-left: 50rpx; /* 设置左侧内边距给图标留出空间 */
		    background-image: url('../../static/serch.png'); /* 设置背景图片路径 */
		    background-size: 40rpx; /* 设置背景图片大小 */
		    background-position: 10px center; /* 设置背景图片位置 */
		    background-repeat: no-repeat; /* 禁止背景图片重复 */
		}
		
		
	
</style>
